<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <title>Home</title>
        <script type="text/javascript" src="../js/big5.js">
        </script>
        <script type="text/javascript">
            
            // LOCATION
            
            function getLocation(){
                Device.Console.log("GEO START")
                $('dev-geo-msg').style.display = "block"
                Device.Location.wait(function(loc){
                    $('dev-geo').style.display = "block"
                    $('dev-geo-msg').style.display = "none"
                    if (!loc) {
                        alert("Error finding current location");
                        return;
                    }
                    $('dev-lat').innerHTML = loc.lat.toString();
                    $('dev-lon').innerHTML = loc.lon.toString();
                    var url = "http://big5apps.appspot.com/map?lat=" + loc.lat + "&amp;lon=" + loc.lon + ""
                    $('dev-map').src = url
                });
                Device.Console.log("GEO END")
                Device.Console.log("GEO XXX")
                return false;
            }
            
            // Handle errors
            Device.Location.onerror = function locationError(code, msg) {
                alert(msg)
            }
            
            // INITIALIZATION
            
            function big5available(){
                // This will only be called if the page is viewed by Big Five
                
                // Set some informations we got from Big Five
                $('dev-model').innerHTML = Device.model
                $('dev-id').innerHTML = Device.id
                
            }
            
            window.onload = function(){
                // Init Big Five and skip to custom "big5available" funcion
                // Device.start(big5available);                
            }
            
        </script>
    </head>
    <body>
        <h1>Location Demo</h1>
        <p>
            <a href="#" onclick="getLocation(); return false;">Do update geo location!</a>
        </p>
        <p style="display: none; font-weight: bold;" id="dev-geo-msg" style="display: none;">
            Getting current coordinates. This may take a while...
        </p>
        <div id="dev-geo" style="display: none;">
            <p>
                Your coordinates are <strong id="dev-lat">???</strong>, <strong id="dev-lon">???</strong>. 
            </p>
            <iframe src="about:blank" id="dev-map" style="width: 302px; height: 302px;">
            </iframe>
        </div>
        <hr/>
        <p>
            <a href="index.html">Back to home page</a>
        </p>
    </body>
</html>
